﻿<Page x:Class="AvalonLibraryTest.Pages.Panels"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:av="http://schemas.codeplex.com/wpfcontrib/xaml/presentation"
    Title="Panels">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <DockPanel>
            <TextBlock DockPanel.Dock="Top" Text="AutoGrid" Margin="5" FontWeight="Bold" />
            <TextBlock DockPanel.Dock="Top" Margin="5" TextWrapping="Wrap">
                Derived from the SDK sample AutoIndexingGrid, AutoGrid is capable of automatically setting the
                <Bold>Grid.Row</Bold> and <Bold>Grid.Column</Bold> properties, according to the child's index.
                You can also set the <Bold>ChildMargin</Bold>, <Bold>ChildHorizontalAlignment</Bold> and
                <Bold>ChildVerticalAlignment</Bold> to affect all grid children.
            </TextBlock>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <av:AutoGrid ChildMargin="10" ChildHorizontalAlignment="Stretch" ChildVerticalAlignment="Top"
                VerticalAlignment="Top">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Label Content="_ID" Target="{Binding ElementName=ID}" />
                    <TextBox Name="ID" />

                    <Label Content="_Description" Target="{Binding ElementName=Description}" />
                    <DockPanel>
                        <Button Content="..." DockPanel.Dock="Right" />
                        <TextBox Name="Description" />
                    </DockPanel>

                    <Label Content="_Type" Target="{Binding ElementName=Type}" />
                    <ComboBox Name="Type" />
                </av:AutoGrid>
            </ScrollViewer>
        </DockPanel>

        <DockPanel Grid.Column="1">
            <TextBlock DockPanel.Dock="Top" Text="ColumnStackPanel" Margin="5" FontWeight="Bold" />
            <TextBlock DockPanel.Dock="Top" Margin="5" TextWrapping="Wrap">
                This panel stacks elements in columns. Its usefulness is debatable...
            </TextBlock>
            
            <av:ColumnStackPanel ColumnCount="3">
            
                <Rectangle Fill="Red" RadiusX="5" RadiusY="5" Height="25" Margin="2"
                    av:ColumnStackPanel.EndColumn="1" av:ColumnStackPanel.RowOrdinal="0" />
                <Rectangle Fill="Green" RadiusX="5" RadiusY="5" Height="30" Margin="2"
                    av:ColumnStackPanel.RowOrdinal="1" />
                <Rectangle Fill="Gold" RadiusX="5" RadiusY="5" Height="20" Margin="2"
                    av:ColumnStackPanel.RowOrdinal="2" />
                    
                <Rectangle Fill="Blue" RadiusX="5" RadiusY="5" Height="20" Margin="2"
                    av:ColumnStackPanel.StartColumn="1" av:ColumnStackPanel.EndColumn="2" av:ColumnStackPanel.RowOrdinal="1" />

                <Rectangle Fill="DarkCyan" RadiusX="5" RadiusY="5" Height="40" Margin="2"
                    av:ColumnStackPanel.StartColumn="2" av:ColumnStackPanel.EndColumn="2" av:ColumnStackPanel.RowOrdinal="0" />
                <Rectangle Fill="Magenta" RadiusX="5" RadiusY="5" Height="20" Margin="2"
                    av:ColumnStackPanel.StartColumn="2" av:ColumnStackPanel.EndColumn="2" av:ColumnStackPanel.RowOrdinal="2" />
            </av:ColumnStackPanel>
        </DockPanel>
    </Grid>
</Page>
